import React, {Component} from 'react'
import {Row, Col} from 'antd'
import logo from '../images/logo.png'
import {Menu, Icon, Tabs, message, Form, Input, Button, Checkbox, Modal} from 'antd'
import {Link} from 'react-router-dom'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class MobileHeader extends Component {
    constructor(props) {
        super(props)
        this.state = {
            current: 'top',
            modalVisible: false,
            action: 'login',
            isLogin: false,
            userNickName: '',
            userId: 0
        }
    }

    login(){
        this.setModalVisible(true)
    }

    setModalVisible(value) {
        this.setState({
            modalVisible: value
        })
    }

    //菜单点击
    handleClick(e) {
        if (e.key == 'register') {
            this.setState({
                current: 'register',
            })
            this.setModalVisible(true)
        } else {
            this.setState({
                current: e.key
            })
        }
    }

    //表单提交
    handleSubmit(e) {
        e.preventDefault();
        var myFetchOptions = {
            method: 'GET',
        };
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                //执行提交
            }
        });
        // var formData = this.props.form.getFieldsValue()
        // console.log(formData)
    }

    render() {
        let {getFieldDecorator} = this.props.form;
        const userShow = this.state.isLogin
                ?
                <Link>
                    <Icon type="inbox"/>
                </Link>
                :
                <Icon type="setting" onClick={this.login.bind(this)}/>
            ;

        return (
            <div id="mobileheader">
                <header>
                    <img src={logo} alt="logo"/>
                    <span>ReactNews</span>
                    {userShow}
                </header>
                <Modal
                    title="用户中心"
                    wrapClassName="vertical-center-modal"
                    visible={this.state.modalVisible}
                    onCancel={() => {
                                this.setModalVisible(false)
                            }}
                    onOk={() => {
                                this.setModalVisible(false)
                            }}
                    okText="关闭"
                >
                    <Tabs defaultActiveKey="2">
                        <TabPane tab="注册" key="2">
                            <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)}>
                                <FormItem label="账户">
                                    {getFieldDecorator('r_username', {
                                        rules: [{required: true, message: '请输入您的账户!'}],
                                    })(
                                        <Input placeholder="请输入您的账户"/>
                                    )}
                                </FormItem>
                                <FormItem label="密码">
                                    {getFieldDecorator('r_password', {
                                        rules: [
                                            {required: true, message: '请输入您的密码!'}
                                        ],
                                    })(
                                        <Input type="password" placeholder="请输入您的密码"/>
                                    )}
                                </FormItem>
                                <FormItem label="确认密码">
                                    {getFieldDecorator('r_confirmPassword', {
                                        rules: [
                                            {required: true, message: '请再次输入您的密码!'},
                                            {validator: this.checkPassword}
                                        ],
                                    })(
                                        <Input type="password" placeholder="请再次输入您的密码"/>
                                    )}
                                </FormItem>
                                <Button type="primary" htmlType="submit">提交</Button>
                            </Form>
                        </TabPane>
                    </Tabs>
                </Modal>
            </div>
        )
    }
}

export default MobileHeader = Form.create()(MobileHeader)